﻿<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Index.aspx.cs" Inherits="Index" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="utf-8" />
    <!-- IE=edge告诉IE使用最新的引擎渲染网页，chrome=1则可以激活Chrome Frame -->
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
    <title><%=modelset.title%></title>
    <meta name="description" content="<%=modelset.description%>" />
    <meta name="keywords" content="<%=modelset.keywords%>" />
    <link rel="stylesheet" href="js/jquery.HooRay/jquery.HooRay.css">
    <link rel="stylesheet" href="img/ui/index.css?v=20120704">
    <link rel="stylesheet" href="img/skins/default.css" />
    <!--[if lte IE 6]>
<style>
body{behavior:url("img/ui/csshover3.htc")}
</style>
<![endif]-->
</head>
<body>
<!-- 登入界面 -->
<div class="loginmask"></div>
<div class="loading"></div>
<div class="login">
	<div class="logo"></div>
	<div class="input">
		<div class="log">
			<div class="name"><input type="text" id="value_1" placeholder="用户名" name="value_1" value="" tabindex="1"><a class="btn" href="javascript:;" style="position:absolute;right:-45px;color:#FFF;width:40px;height:30px;line-height:30px">注册</a></div>
			<div class="pwd"><input type="password" id="value_2" placeholder="密码" name="value_2" value="" tabindex="2"><input type="button" class="submit" tabindex="3"><div class="check"></div></div>
			<div class="tip"></div>
		</div>
		<div class="reg disn">
			<div class="name"><input type="text" id="reg_1" placeholder="用户名" name="reg_1"><a class="btn" href="javascript:;" style="position:absolute;left:-45px;color:#FFF;width:40px;height:30px;line-height:30px">返回</a></div>
			<div class="pwd"><input type="password" id="reg_2" placeholder="密码" name="reg_2"></div>
			<div class="pwd"><input type="password" id="reg_3" placeholder="确认密码" name="reg_3"><input type="button" class="submit" tabindex="3"><div class="check"></div></div>
			<div class="tip"></div>
		</div>
	</div>
</div>
<!-- 桌面 -->
<div id="desktop">
	<div id="zoom-tip"><div><i>​</i>​<span></span></div><a href="javascript:;" class="close" onClick="HROS.zoom.close();">×</a></div>
	<div id="desk">
		<div id="desk-1" class="desktop-container"><div class="scrollbar scrollbar-x"></div><div class="scrollbar scrollbar-y"></div></div>
		<div id="desk-2" class="desktop-container"><div class="scrollbar scrollbar-x"></div><div class="scrollbar scrollbar-y"></div></div>
		<div id="desk-3" class="desktop-container"><div class="scrollbar scrollbar-x"></div><div class="scrollbar scrollbar-y"></div></div>
		<div id="desk-4" class="desktop-container"><div class="scrollbar scrollbar-x"></div><div class="scrollbar scrollbar-y"></div></div>
		<div id="desk-5" class="desktop-container"><div class="scrollbar scrollbar-x"></div><div class="scrollbar scrollbar-y"></div></div>
		<div id="dock-bar">
			<div id="dock-container">
				<div class="dock-middle">
					<div class="dock-applist"></div>
					<div class="dock-toollist">
						<a href="javascript:;" class="dock-tool-pinyin" title="QQ拼音输入法"></a>
						<a href="javascript:;" class="dock-tool-style" title="主题设置"></a>
					</div>
				</div>
			</div>
		</div>
	</div>
	<div id="task-bar-bg1"></div>
	<div id="task-bar-bg2"></div>
	<div id="task-bar">
		<div id="task-next"><a href="javascript:;" id="task-next-btn" hidefocus="true"></a></div>
		<div id="task-content">
			<div id="task-content-inner"></div>
		</div>
		<div id="task-pre"><a href="javascript:;" id="task-pre-btn" hidefocus="true"></a></div>
	</div>
	<div id="nav-bar">
		<div class="nav-wrapper">
			<div class="nav-container nav-current-1" id="navContainer">
				<div class="indicator indicator-header" id="navbarHeaderImg"><img src="img/ui/avatar.png" class="indicator-header-img"></div>
				<a class="indicator indicator-1" href="javascript:;" index="1" title="桌面1">
					<span class="indicator-icon-bg"></span>
					<span class="indicator-icon indicator-icon-1">1</span>
				</a>
				<a class="indicator indicator-2" href="javascript:;" index="2" title="桌面2">
					<span class="indicator-icon-bg"></span>
					<span class="indicator-icon indicator-icon-2">2</span>
				</a>
				<a class="indicator indicator-3" href="javascript:;" index="3" title="桌面3">
					<span class="indicator-icon-bg"></span>
					<span class="indicator-icon indicator-icon-3">3</span>
				</a>
				<a class="indicator indicator-4" href="javascript:;" index="4" title="桌面4">
					<span class="indicator-icon-bg"></span>
					<span class="indicator-icon indicator-icon-4">4</span>
				</a>
				<a class="indicator indicator-5" href="javascript:;" index="5" title="桌面5">
					<span class="indicator-icon-bg"></span>
					<span class="indicator-icon indicator-icon-5">5</span>
				</a>
				<a class="indicator indicator-manage" href="javascript:;" title="全局视图"></a>
			</div>
		</div>
	</div>
</div>
<!-- 全局视图 -->
<div id="appmanage">
	<a class="amg_close" href="javascript:;"></a>
	<div id="amg_dock_container"></div>
	<div class="amg_line_x"></div>
	<div id="amg_folder_container">
		<div class="folderItem">
			<div class="folder_bg folder_bg1"></div>
			<div class="folderOuter">
				<div class="folderInner"></div>
				<div class="scrollBar"></div>
			</div>
		</div>
		<div class="folderItem">
			<div class="folder_bg folder_bg2"></div>
			<div class="folderOuter">
				<div class="folderInner"></div>
				<div class="scrollBar"></div>
			</div>
			<div class="amg_line_y"></div>
		</div>
		<div class="folderItem">
			<div class="folder_bg folder_bg3"></div>
			<div class="folderOuter">
				<div class="folderInner"></div>
				<div class="scrollBar"></div>
			</div>
			<div class="amg_line_y"></div>
		</div>
		<div class="folderItem">
			<div class="folder_bg folder_bg4"></div>
			<div class="folderOuter">
				<div class="folderInner"></div>
				<div class="scrollBar"></div>
			</div>
			<div class="amg_line_y"></div>
		</div>
		<div class="folderItem">
			<div class="folder_bg folder_bg5"></div>
			<div class="folderOuter">
				<div class="folderInner"></div>
				<div class="scrollBar"></div>
			</div>
			<div class="amg_line_y"></div>
		</div>
	</div>
</div>
<!-- 应用评分 -->
<div id="star">
	<div class="grade-box">
		<div class="star-num"></div>
		<div class="star-box">
			<div>打分：</div>
			<i></i>
			<ul>
				<li class="grade-1" num="1"><a href="javascript:;"><em>很不好用</em></a></li>
				<li class="grade-2" num="2"><a href="javascript:;"><em>体验一般般</em></a></li>
				<li class="grade-3" num="3"><a href="javascript:;"><em>比较好用</em></a></li>
				<li class="grade-4" num="4"><a href="javascript:;"><em>很好用</em></a></li>
				<li class="grade-5" num="5"><a href="javascript:;"><em>棒极了，推荐</em></a></li>
			</ul>
		</div>
	</div>
</div>
<!-- 新建文件夹 -->
<div id="addfolder">
	<a class="folderSelector"><img src="img/ui/folder_default.png" idx="default"></a>
	<div class="folderNameTxt">请输入文件夹名称：</div>
	<div class="folderInput"><input type="text" class="folderName" id="folderName"></div>
	<div class="folderNameError">文件夹名称不能只包含空字符</div>
	<div class="fcDropdown">
		<a class="fcDropdown_item" title="默认"><img class="fcDropdown_img" src="img/ui/folder_default.png" idx="default"></a>
		<a class="fcDropdown_item" title="文本"><img class="fcDropdown_img" src="img/ui/folder_doc.png" idx="doc"></a>
		<a class="fcDropdown_item" title="游戏"><img class="fcDropdown_img" src="img/ui/folder_game.png" idx="game"></a>
		<a class="fcDropdown_item" title="生活"><img class="fcDropdown_img" src="img/ui/folder_life.png" idx="life"></a>
		<a class="fcDropdown_item" title="音乐"><img class="fcDropdown_img" src="img/ui/folder_music.png" idx="music"></a>
		<a class="fcDropdown_item" title="工具"><img class="fcDropdown_img" src="img/ui/folder_tool.png" idx="tool"></a>
		<a class="fcDropdown_item" title="视频"><img class="fcDropdown_img" src="img/ui/folder_video.png" idx="video"></a>
	</div>
</div>
<!-- 新手帮助 -->
<div id="help">
	<a href="javascript:;" class="close" title="关闭新手帮助">×</a>
	<div id="step1" class="step" step="1" style="position:relative;left:50%;top:50%;margin-left:-160px;margin-top:-60px;width:280px;height:100px">
		<p style="text-align:center">
			<span class="h2">欢迎使用WebOS</span>
			<br>下面我会简单介绍下如何使用，以便你快速上手<br>
			<a href="javascript:;" class="next">下一步</a>
		</p>
	</div>
	<div id="step2" class="step" step="2" style="top:90px;left:140px;width:250px">
		<b class="jt jt_left" style="left:-40px;top:20px"></b>
		<p>
			<span class="h1">①</span><span class="h2">桌面</span>
			<br>可以在应用中心添加自己需要的应用到桌面<br>
			<a href="javascript:;" class="next">下一步</a>
		</p>
	</div>
	<div id="step3" class="step" step="3" style="top:90px;left:550px;width:250px">
		<b class="jt jt_top" style="top:-40px;left:30px"></b>
		<p>
			<span class="h1">②</span><span class="h2">应用码头</span>
			<br>可以将桌面图标拖放到这<br>
			<a href="javascript:;" class="next">下一步</a>
		</p>
	</div>
	<div id="step4" class="step" step="4" style="bottom:50px;left:550px;width:250px">
		<b class="jt jt_bottom" style="bottom:-40px;left:30px"></b>
		<p>
			<span class="h1">③</span><span class="h2">任务栏</span>
			<br>这个就不用我介绍了吧 =)<br>
			<a href="javascript:;" class="over">&nbsp;完&nbsp;成&nbsp;</a>
		</p>
	</div>
</div>
<!-- 浏览器缩放 -->
<div id="zoombox"></div>
<script src="js/jquery-1.7.2.min.js"></script>
<script src="js/jquery.HooRay/jquery.HooRay.js"></script>
<script src="js/templates.js"></script>
<script src="js/util.js"></script>
<script src="js/core.js?v=20120704"></script>
<script src="js/artDialog4.1.5/artDialog.js?skin=default"></script>
<script>
    $().ready(function () {
        if ($.browser.msie && $.browser.version === "6.0") {
            //DD_belatedPNG.fix('.login .logo, .dock-middle, .dock-toollist a, #desk li img, #desk li .shortcut-addicon, #task-bar-bg1, #task-bar-bg2, .task-item');
        }
        //IE下禁止选中
        document.body.onselectstart = document.body.ondrag = function () { return false; }

        $(".input .log").bind("keyup", function (e) {
            if (e.keyCode == 13) { $('.log .submit').click(); }
        });
        $(".input .reg").bind("keyup", function (e) {
            if (e.keyCode == 13) { $('.reg .submit').click(); }
        });

        $('.btn').click(function () {
            if ($('.log').hasClass('disn')) {
                $('.log').fadeIn().removeClass('disn');
                $('.reg').fadeOut().addClass('disn');
            } else {
                $('.log').fadeOut().addClass('disn');
                $('.reg').fadeIn().removeClass('disn');
            }
        });

        $('#value_1,#value_2,#reg_1,#reg_2,#reg_3').placeholder({ labelMode: true, labelStyle: { left: 8, top: 3, fontSize: '14px' }, labelAlpha: true, labelAcross: true });
        $('.log .submit').click(function () {
            if ($('#value_1').val() != "" && $('#value_2').val() != "") {
                $('.log .submit').hide();
                $('.log .check').show();
                $('.log .tip').text('').hide();
                $.ajax({
                    type: 'POST',
                    url: 'Ajax/user.ashx',
                    data: 'ac=login&value_1=' + $('#value_1').val() + '&value_2=' + $('#value_2').val(),
                    success: function (msg) {
                        $('.log .submit').show();
                        $('.log .check').hide();
                        var m = msg.split(',');
                        if (m[0] == 1) {
                            loginSuccess();
                            if (m[1] == 1) {
                                //加载新手帮助
                                HROS.base.help();
                            }
                        } else {
                            $('.log .tip').text('用户名或密码错误').show();
                        }
                    }
                });
            }
        });
        $('.reg .submit').click(function () {
            if ($('#reg_1').val() != "" && $('#reg_2').val() != "" && $('#reg_3').val() != "") {
                if ($('#reg_2').val() != $('#reg_3').val()) {
                    $('.reg .submit').show();
                    $('.reg .check').hide();
                    $('.reg .tip').text('确认密码不正确').show();
                } else {
                    var username = $('#reg_1').val();
                    $('.reg .submit').hide();
                    $('.reg .check').show();
                    $('.reg .tip').text('').hide();
                    $.ajax({
                        type: 'POST',
                        url: 'Ajax/user.ashx',
                        data: 'ac=reg&value_1=' + $('#reg_1').val() + '&value_2=' + $('#reg_2').val(),
                        success: function (msg) {
                            $('.reg .submit').show();
                            $('.reg .check').hide();
                            if (msg == 1) {
                                $('.log .tip').text('恭喜你，注册成功').show();
                                $('.log #value_1').val(username).focus().blur();
                                $('.log #value_2').focus();
                                $('.log').fadeIn().removeClass('disn');
                                $('.reg').fadeOut().addClass('disn');
                            } else {
                                $('.reg .tip').text('用户名已存在').show();
                            }
                        }
                    });
                }
            }
        });
        //验证用户是否已登入，如果是则直接进入桌面
        $.ajax({ url: 'Ajax/user.ashx?ac=checkLogin', dataType: 'html', success: function (msg) { if (msg) { loginSuccess(); } else { $('.login').show(); $('.loading').fadeOut(500); } } });
    });
    var loginSuccess = function () {
        $('.loading').hide();
        $('.loginmask').fadeIn(500, function () {
            $('.log #value_1, .log #value_2').val('').focus();
            $('#desktop').show();
            $('.login').hide();
            $(this).hide();
            //初始化
            HROS.base.init();
            var myMail = 'hooray0' + 905 + '@' + 'foxmail.com';
            myMail = '<a href="mailto:' + myMail + '" style="color:#214FA3">' + myMail + '</a>';
            //		art.dialog({
            //			title: '欢迎使用HoorayOS',
            //			icon: 'face-smile',
            //			width: 320,
            //			content: '本框架开源免费，若需要商业定制，请联系：<br>' + myMail + '<div style="width:100%;height:0px;font-size:0;border-bottom:1px solid #ccc"></div>' +
            //					'如果你对本框架感兴趣，欢迎加入讨论群：<br>213804727' + '<div style="width:100%;height:0px;font-size:0;border-bottom:1px solid #ccc"></div>' +
            //					'HoorayOS是否就是你一直想要的web桌面么？<br>' + '那么我非常期待您能够热情的提供<font style="color:red">35元</font>或者其他金额的捐赠鼓励，正如您支持其他开源项目一样。<br>' + '支付宝：<a href="https://me.alipay.com/hooray" style="color:#214FA3" target="_blank">https://me.alipay.com/hooray</a>',
            //			fixed: true
            //		});
        });
    };
</script>
</body>
</html>
